<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 发送ajax请求</title>
    <link rel="stylesheet" href="../static/调试.svg" type="image/x-icon">
</head>
<body>
<!--使用js 发送ajax请求-->
<div>
    <label>账号:
        <input id="i1" type="text" name="account" placeholder="请输入账号">
    </label>
</div>

<div>
    <label>密码:
        <input id="i2" type="password" name="pwd" placeholder="请输入密码">
    </label>
</div>

<div>
    <label>
        <input id="i3" type="button" value="登录" onclick="login()">
    </label>
</div>

<script>
    function login() {
//        let acc = $("[name='account']").val()
//        let pwd = $("[name='pwd']").val()
        let acc = document.getElementsByName('account')[0].value
        let pwd = document.getElementsByName('pwd')[0].value
        console.log(acc, pwd)

//        把请求的数据变成对象的格式的数据
        let body = {"account": acc, "pwd": pwd}
        body = JSON.stringify(body)

//        发送请求的类进行实例化
        let xml = new XMLHttpRequest()
//        open方法的参数：请求方式、请求接口地址、是否异步（true）
        xml.open('post', 'http://127.0.0.1:5000/api/login', true)
//        设置请求头
        xml.setRequestHeader('Content-Type', 'application/json')
//        发送请求
        xml.send(body)
    }
</script>
</body>
</html>